import React from 'react';
import style from './style.css'
import MyIcon from "../../component/Icon/icon";
import Map from 'lodash.map'
import {uuid} from "../../util/uitls";

class Bottom extends React.Component {
    constructor(props) {
        super()
        this.state = {
            hidden: false,
            activeItem: {
                icon: props.defaultIcon
            }
        }
    }


    onClick(item) {
        this.setState({
            activeItem: item
        })
        item.onClick.call(item)
    }

    render() {
        var self = this
        return (
            <div className={style.bottom}>
                {Map(this.props.tabs, item => {
                    return <div
                        key={uuid()}
                        className={style.tab}
                        onClick={self.onClick.bind(self, item)}>
                        <MyIcon type={item.icon} className={style.icon}
                                style={{color: self.state.activeItem.icon == item.icon ? "rgba(102, 101, 255, 0.9)" : "black"}}
                        ></MyIcon>
                        {
                            item.title && <div>
                                {item.title}
                            </div>
                        }
                    </div>
                })}
            </div>
        );
    }
}

Bottom.defaultProps = {
    tabs: [],
    defaultIcon: {
        icon: ""
    }
}
export default Bottom;